<template>
    <div>
        <template v-for="(item, index) in data">
            <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
                情况一：有子集的情况：                         -->
            <el-submenu
                :key="index"
                :index="item.router"
                v-if="item.childNode&&item.childNode.length > 0"
            >
                <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
                </template>
                <menu-item :data="item.childNode"></menu-item>
                
                </el-submenu>
                <!-- 情况二：没子集的情况： -->
                <el-menu-item :key="item.router" v-else :index="item.router">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </template>
    </div>
</template>

<script>
export default {
    name:'menu-item',
    props:['data']

}
</script>

<style scoped>
.el-menu--collapse  .el-submenu__title span{
    display: none;
  }

</style>